<template>
    <Category></Category>

    <el-card style="margin: 10px 0px;">
        <div v-show="scene == 0">
            <el-button type="primary" size="default" icon="Plus" @click="addSpu">添加SPU</el-button>
            <el-table style="margin: 15px 0px;" :data="dateList" border>
                <el-table-column label="序号" width="80" align="center" type="index" />
                <el-table-column prop="name" label="SPU名称" />
                <el-table-column prop="describe" label="SPU描述" />
                <el-table-column label="操作">
                    <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku"></el-button>
                    <el-button type="primary" size="small" icon="Edit" title="修改SPU" @click="updateSpu"></el-button>
                    <el-button type="primary" size="small" icon="View" title="查看SKU列表" @click="showSku"></el-button>
                    <el-button type="primary" size="small" icon="Delete" title="删除SPU" @click="deleteSku"></el-button>
                </el-table-column>
            </el-table>

            <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :background="true" layout="prev, pager, next, jumper, -> , sizes,total" :total="400"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- SPU组件 -->
        <SpuForm v-show="scene == 1" @changeScene="changeScene"></SpuForm>

        <!-- SKU组件 -->
        <SkuForm v-show="scene == 2" @changeScene="changeScene" ref="skuRef"></SkuForm>

        <el-dialog title="SKU列表" v-model="show">
            <el-table border>
                <el-table-column label="sku名字" />
                <el-table-column label="sku价格" />
                <el-table-column label="sku重量" />
                <el-table-column label="sku图片" />
            </el-table>
        </el-dialog>

    </el-card>
</template>

<script setup lang='ts' name='Spu'>
import { ref } from 'vue';
import SpuForm from './spuForm.vue';
import SkuForm from './skuForm.vue';

let scene = ref<number>(0);
let page = ref<number>(1);
let pageSize = ref<number>(10);
let show = ref<boolean>(false)
let dateList = ref<any[]>([{
    name: '小米手机',
    date: '2023-10-01',
    describe: '小米手机的雷总真的很牛逼,小米手机的雷总真的很牛逼,小米手机的雷总真的很牛逼小米手机的雷总真的很牛逼,小米手机的雷总真的很牛逼小米手机的雷总真的很牛逼'
}]);

let skuRef = ref();

/// 修改pageSize
const handleSizeChange = () => {
    // pageSize = val;
}

/// 修改当前页
const handleCurrentChange = () => {

}

/// 
const addSpu = () => {
    3
    scene.value = 1;
};

/// 子组件绑定定义事件 
const changeScene = (val: number) => {
    scene.value = val;
}

/// 修改属性
const updateSpu = () => {
    scene.value = 1;
}

// 展示SKU列表
const showSku = () => {
    show.value = true;
}

/// 添加sku模块
const addSku = () => {
    scene.value = 2;
    skuRef.value.initData()
}

// 删除
const deleteSku = () => {

}


</script>

<style scoped lang='scss'></style>